<template>
  <el-form
    ref="otherInfo"
    :model="paramsObj"
    :rules="formRules"
    :label-width="labelWidth"
    :label-position="formAlign"
    class="create-other-info">
    <el-row class="response-el-row" type="flex">
      <el-col v-if="paramsObj.supplierType === 1" :span="rowSpan">
        <el-form-item label="纳税人识别号" prop="taxpayerIdentificationNumber">
          <el-input v-model="paramsObj.taxpayerIdentificationNumber" :maxlength="50" class="width240" placeholder="输入纳税人识别号" type="text" size="small" />
        </el-form-item>
      </el-col>
      <el-col v-if="paramsObj.supplierType === 1" :span="rowSpan">
        <el-form-item label="营业执照" prop="idCard">
          <div class="width240">
            <upAttachment
              ref="uploadImg"
              :hide-confirm="true"
              :file-list="paramsObj.idCard"
              import-api="/common/file/upload"
              btn-text="上传文件"
              @complateSetData="complateSetData($event, 'idCard')"
              @removeFileList="removeFileList($event, 'idCard')" />
          </div>
        </el-form-item>
      </el-col>
      <el-col :span="rowSpan">
        <el-form-item label="微信号" prop="phone">
          <el-input v-model="paramsObj.wxCode" :maxlength="20" class="width240" placeholder="输入微信号" type="text" size="small" />
        </el-form-item>
      </el-col>
      <el-col v-if="paramsObj.supplierType === 1" :span="rowSpan">
        <el-form-item label="合作状态" prop="cooperationStatus">
          <selectWithoutHttp v-model="paramsObj.cooperationStatus" :list-data="cooperationStatusOptions" class="width240" key-name="id" label-name="label"/>
        </el-form-item>
      </el-col>
      <el-col v-if="!paramsObj.supplierType" :span="rowSpan">
        <el-form-item label="性别" prop="sex">
          <el-radio-group v-model="paramsObj.sex">
            <el-radio :label="0"><span style="font-size:14px;">男</span></el-radio>
            <el-radio :label="1"><span style="font-size:14px;">女</span></el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col v-if="!paramsObj.supplierType" :span="rowSpan">
        <el-form-item label="身份证" prop="idCard">
          <div class="width240">
            <upAttachment
              ref="uploadImg"
              :hide-confirm="true"
              :file-list="paramsObj.idCard"
              import-api="/common/file/upload"
              btn-text="上传文件"
              @complateSetData="complateSetData($event, 'idCard')"
              @removeFileList="removeFileList($event, 'idCard')" />
          </div>
        </el-form-item>
      </el-col>
      <el-col v-if="!paramsObj.supplierType" :span="rowSpan">
        <el-form-item label="刊例状态" prop="publishedStatus">
          <selectWithoutHttp v-model="paramsObj.publishedStatus" :list-data="articlesStatusOptions" class="width240" key-name="id" label-name="label"/>
        </el-form-item>
      </el-col>
      <el-col v-if="!paramsObj.supplierType" :span="rowSpan">
        <el-form-item label="手机号码" prop="phone">
          <el-input v-model="paramsObj.phone" :maxlength="20" class="width240" placeholder="输入手机号码" type="text" size="small" />
        </el-form-item>
      </el-col>
      <el-col v-if="paramsObj.supplierType === 1" :span="rowSpan">
        <el-form-item label="备注" prop="remark">
          <el-input v-model="paramsObj.remark" :maxlength="1000" resize="none" class="width240" placeholder="请简单介绍该供应商" type="textarea" size="small" />
        </el-form-item>
      </el-col>
      <el-col v-if="!paramsObj.supplierType" :span="rowSpan">
        <el-form-item label="备注" prop="remark">
          <el-input v-model="paramsObj.remark" :maxlength="1000" class="width240" resize="none" placeholder="请简单介绍该供应商" type="textarea" size="small" />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import { publishedStatus, cooperationStatus } from '@/filters/status';
import upAttachment from '@/components/Common/upAttachment/index';
import selectWithoutHttp from '@/components/Common/selectWithoutHttp';
import { hasRouteAuth } from '@/utils/permission';
import { TAG_MODULES } from '@/utils/const';
import { mapState } from 'vuex';
import mobileCreate from '@/mixins/mobileCreate';
export default {
  filters: {
    publishedStatus,
    cooperationStatus
  },
  components: {
    upAttachment,
    selectWithoutHttp
  },
  mixins: [mobileCreate],
  model: {
    prop: 'paramsObj',
    event: 'changeValue'
  },
  props: {
    paramsObj: {
      type: Object,
      default: () => {}
    },
    isCreateSupplier: {
      type: Boolean,
      default: false
    },
    isEdit: {
      type: Boolean,
      default: false
    },
    moduleType: {
      type: Number,
      default: TAG_MODULES.SETTLE_SUPPLIER
    },
    labelWidth: {
      type: String,
      default: '100px'
    },
    rowSpan: {
      type: Number,
      default: 12
    }
  },
  data() {
    return {
      TAG_MODULES,
      formRules: {
        supplierType: [{ required: true, trigger: 'change', message: '请选择供应商类型' }],
        channelName: [{ required: true, trigger: 'change', message: '请输入供应商名称' }],
        departmentId: [{ required: true, trigger: 'change', message: '请选择所属部门' }],
        publishedStatus: [{ required: true, trigger: 'change', message: '请选择刊例状态' }],
        cooperationStatus: [{ required: true, trigger: 'change', message: '请选择合作状态' }]
      },
      articlesStatusOptions: [{ id: 0, label: '正常上刊' }, { id: 1, label: '解约下刊' }, { id: 2, label: '处罚停刊' }],
      cooperationStatusOptions: [{ id: 0, label: '正常合作' }, { id: 1, label: '终止合作' }]
    };
  },
  computed: {
    ...mapState({
      'userInfo': state => state.user.userInfo
    }),
    canEdit() {
      return !!(this.isCreateSupplier && !this.hasRouteAuth('medium:supplier:editSupplierName') && this.isEdit);
    }
  },
  watch: {
    'paramsObj.supplierType'(type) {
      if (type === 0) {
        typeof this.paramsObj.publishedStatus !== 'number' && (this.paramsObj.publishedStatus = 0);
      } else {
        typeof this.paramsObj.cooperationStatus !== 'number' && (this.paramsObj.cooperationStatus = 0);
      }
    }
  },
  created() {
    this.paramsObj.createUser = this.userInfo.userName;
    this.$emit('changeValue', this.paramsObj);
  },
  methods: {
    hasRouteAuth,
    validateForm(validate = true) {
      return new Promise((resolve, reject) => {
        if (validate) {
          this.$refs.otherInfo.validate(valid => {
            if (valid) {
              resolve(valid);
            } else {
              reject();
            }
          });
        } else {
          resolve(true);
        }
      });
    },
    complateSetData({ data, fileName }, key) {
      const fileList = {
        name: fileName,
        url: data.url,
        time: new Date().getTime()
      };
      if (typeof data === 'string') {
        fileList.url = data;
      } else {
        fileList.url = data.url;
      }
      if (this.paramsObj[key]) {
        this.paramsObj[key].push(fileList);
      } else {
        this.$set(this.paramsObj, key, [fileList]);
      }
      this.$emit('changeValue', this.paramsObj);
    },
    removeFileList({ file, index }, key) {
      this.paramsObj[key].splice(index, 1);
    }
  }
};
</script>

<style lang="scss" scoped>
.create-other-info {
  margin-top: 16px;
  padding: 16px 0 10px;
  .width240 {
    width: 240px;
    &::v-deep {
      .el-select {
        width: 240px;
      }
      .el-input__inner {
        width: 240px;
      }
    }
  }
}
</style>
